import React from 'react'
import ReactDOM from 'react-dom/client'
import { debounce } from './utils'
import { BrowserRouter } from 'react-router-dom'
import App from './index'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

function change() {
  // 视口宽度
  const clientWidth = document.body.clientWidth
  if (clientWidth <= 768) {
    document.body.className = 'global-style small-screen-style'
  } else {
    document.body.className = 'global-style'
  }
}

const changeDebounce = debounce(function () {
  change()
}, 500)

// 初始化
change()

// 窗口事件
window.onresize = changeDebounce

// 横竖屏事件
window.onorientationchange = changeDebounce
